<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title>KLIPSE: a simple and elegant online cljs compiler and evaluator</title>
    <link rel='shortcut icon' type='image/x-icon' href='img/klipse.png' />
    <link rel="stylesheet" type="text/css" href="css/codemirror.css">
    <link rel="stylesheet" type="text/css" href="https://viebel.github.io/klipse/examples/main.css">
    <style>
     .klipse-container:not(:empty):before {
       content: "**** Rendered Component ****";
       font-weight: bold;
       font-family: monospace;
     }

     .klipse-container:not(:empty) {
       background-color: #f7ebc6;
       border-left: 5px solid #f7d87c;
       display: block;
       margin-left: -14px;
       margin-right: -14px;
       padding-left: 9px;
       padding-bottom: 10px;
       margin-bottom: 30px;
     }
    </style>
  </head>
  <body>
    <p>
      <h1>Snippets evaluation - in order </h1>
      The snippets should be evaluated in the order they appear in the DOM, no matter what language the snippets are:
      <pre><code class="eval-js" >foo = () => 1</code></pre>
      <pre><code class="clojure">(js/foo)</code></pre>
      <pre><code class="eval-js" >bar = () => "bar"</code></pre>
      <pre><code class="clojure">(js/bar)</code></pre>
      <h1> Styling </h1>
      <p> Leading and trailing blank lines should be removed. </p>
      <pre>
        <code class="eval-js">



	function foo(){
	var x = 4;
	return x;
	}

        </code></pre>
      <p>Other empty lines should be kept.</p>
      <pre>
        <code class="clojure">

	(defn foo

	([] "aa")



	([x] x))

        </code></pre>

      <h1> JavaScript </h1>
      <h2> Empty input </h2>
      <p> When input is empty the output should be empty </p>
      <pre><code class="eval-js">
      </code></pre>
      <h2> Sharing Data between snippets </h2>
      <pre><code class="eval-js">
	abcd = 1
      </code></pre>
      <pre><code class="eval-js">
	abcd + 1
      </code></pre>

      <h2> Sharing Code between snippets </h2>
      <pre><code class="eval-js">
	function barbaz() { return 1;}
      </code></pre>
      <pre><code class="eval-js">
	barbaz() + 10;
      </code></pre>
      <h2> All the js values should be printed properly </h2>
      <pre><code class="eval-js">
	bba = new Set();
	bba.add(1);
	bba.add(2);
	xyyy = {a: 1,
	aa: bba,
	str: "Hello World\nand Klipse!",
	date: new Date(),
	rrr: /^aa[a]+$/,
	c: [1/0, NaN, Promise.resolve(1)],
	arr: new Int32Array(3),
	d: Symbol("dd")}
	xyyy.selfRef = xyyy;
	xyyy
      </code></pre>
      <h2>Containers</h2>
      Each snippet has a container near it that is accessible with `klipse_container`:
      <pre><code class="eval-js">
	klipse_container.innerHTML="hello";
	[1,2,3]
      </code></pre>

      <h2> Evaluate snippet in a loop </h2>
      <p>This snippet should be evaluated only once</p>
      <pre><code class="eval-js">Date()</code></pre>
      <p>This snippet should be evaluated every second</p>
      <pre><code class="eval-js" data-loop-msec="1000">Date()</code></pre>
      <p>This snippet should be evaluated every 5 seconds</p>
      <pre><code class="eval-js" data-loop-msec="5000">Date()</code></pre>
      <h2> Native JavaScript </h2>
      <p>Functions should be displayed as empty strings</p>
      <div class="eval-js">
        () => 1
      </div>
      <div class="eval-js">
        [1, 2, 3].reduce(
        function(total, num){ return total + num }
        , 0);
      </div>
      <h2> Printing with console.log </h2>
      <code>console.log</code> outputs should be appended to the result cell
      <div class="eval-js">
        console.log("hello");
        console.log("klipse\nand cljs");
        console.log("in 1st snippet");
        2+3;
      </div>
      <br/>
      <div class="eval-js">
        console.log("hello");
        console.log("klipse");
        console.log("in 2nd snippet");
        3+19;
      </div>
      <p><code>console.log</code> should return <code>undefined</code></p>
      <pre><code class="eval-js">
	console.log(19);
      </code></pre>


      <h2> Async console.log </h2>
      When the call to <code>console.log</code> is asynchronous, you must use <code>data-async-code="true"</code>:

      <pre><code class="eval-js" data-async-code="true">
	setTimeout(function() {
	console.log("1st snippet", 1/0, [1, 2, {a: 2}]);
	}, 1000);
      </code></pre>
      <pre><code class="eval-js" data-async-code="true">
	setTimeout(function() {
	console.log("2nd snippet");
	console.log("2nd snippet - bb");
	}, 500);
      </code></pre>
      <br/>
      <h2> EcmaScript 2017 </h2>
      <h3> Empty input </h3>
      <p> When input is empty the output should be empty </p>
      <pre><code class="es2017">
      </code></pre>

      <pre><code class="es2017" data-async-code="true">
	async function sleep(ms = 0) {
	return new Promise(r => setTimeout(r, ms));
	}

	async function run() {
	console.log("Before: " + (new Date()).toString());
	await sleep(1000);
	console.log("After:  " + (new Date()).toString());
	}

	run();

	(async () => {
	await sleep(2000);
	console.log('a');
	await sleep(1000);
	console.log('b');
	})()

      </code></pre>
      <pre><code class="es2017">
	Object.entries({ one: 1, two: 2 })
      </code></pre>


      Each snippet has a container near it that is accessible with `klipse_container`:
      <pre><code class="es2017">
	klipse_container.innerHTML="hello es2017";
	[1,2,3]
      </code></pre>

      <pre><code class="es2017" data-async-code="true">
	let obj = { one: 1, two: 2 };
	for (let [k,v] of Object.entries(obj)) {
        console.log(`${JSON.stringify(k)}: ${JSON.stringify(v)}`);
        }
      </code></pre>

      <h1> React 15.3.1 and JSX </h1>
      <pre><code class="eval-js" data-external-libs="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-with-addons.js, https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js">
	Object.keys(React)
      </code></pre>
      <pre><code class="transpile-jsx">
	&lt;div className="shopping-list"&gt;
        &lt;h1&gt;Shopping List for {this.props.name}&lt;/h1&gt;
	&lt;/div&gt;
      </code></pre>

      <p>In ES6 class definitions are local, therefore we have to add them to the global objet explicitly</p>
      <pre><code class="jsx">
	class ShoppingList extends React.Component {
	render() {
	return (
	&lt;div className="shopping-list"&gt;
        &lt;h1&gt;Shopping List for {this.props.name}&lt;/h1&gt;
        &lt;ul&gt;
        &lt;li&gt;Instagram&lt;/li&gt;
        &lt;li&gt;WhatsApp&lt;/li&gt;
        &lt;li&gt;Oculus&lt;/li&gt;
        &lt;/ul&gt;
	&lt;/div&gt;
	);
	}
	}
	window.ShoppingList = ShoppingList
      </code></pre>
      <pre><code class="react">
React.createElement(ShoppingList)
      </code></pre>
      <pre><code class="render-jsx">
&lt;i&gt;&lt;ShoppingList&gt;&lt;/ShoppingList&gt;&lt;/i&gt;
      </code></pre>
      <pre><code class="eval-js" data-async-code="true">
ReactDOM.render(React.createElement(ShoppingList), klipse_container)
      </code></pre>

      <h1> Golang </h1>
	    <div class="golang">
	      import "fmt"

		  func main() {
			  fmt.Println("Hi!")
		  }
	    </div>

      <script>
       window.klipse_settings = {
         codemirror_options_in: {
           lineWrapping: true,
           autoCloseBrackets: true
         },
         codemirror_options_out: {
           lineWrapping: true
         },
         selector: '.clojure,.clj',
         selector_es2017: '.es2017',
         selector_eval_js: '.eval-js',
         selector_jsx: '.jsx',
         selector_transpile_jsx: '.transpile-jsx',
         selector_render_jsx: '.render-jsx',
         selector_react: '.react',
         selector_golang: '.golang',
       };
      </script>
      <script src="plugin/js/klipse_plugin.js"></script>
  </body>
</html>
